<template>
  <div >
    <div style="display: flex;justify-content: center;align-items: center">
      <el-input style="width: 200px" v-model="input" placeholder="请输入内容"></el-input>
      <el-button @click="change" type="primary" icon="el-icon-search" style="margin-left: 20px">搜素</el-button>
    </div>
    <div v-if="articleList.length === 0" style="margin: 30px auto;width: 100%;display: flex;justify-content: center;align-items: center;text-align: center">
      <span >没有查到任何东西哦</span>
    </div>
    <div style="display: flex;flex-wrap: wrap; justify-content: center">
      <div v-for="(item,index) in articleList "   :key="item.id"  >
        <div style="width: 400px;height: 300px;border-radius: 12px;
        background-color: white;margin-top: 20px;margin-left: 15px;position: relative">
          <div class="card-image">
            <el-image class="my-el-image"
                      v-once
                      lazy
                      :src=" item.articleCover || 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'"
                      fit="cover">
              <div slot="error" class="image-slot myCenter" style="background-color:lightgreen">
                <div class="error-text">
                  <div>遇事不决，可问春风</div>
                </div>
              </div>
            </el-image>
          </div>
          <div class="card-body">
            <div class="card-title" @click="$router.push('/detail?id='+item.id)">
              {{item.articleTitle}}
            </div>
            <div class="card-desc">
              {{item.articleContent}}
            </div>

            <div class="card-time">
              <svg viewBox="0 0 1024 1024" width="14" height="14" style="vertical-align: -2px;">
                <path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#409EFF"></path>
                <path
                    d="M654.222222 256c-17.066667 0-28.444444 11.377778-28.444444 28.444444v56.888889c0 17.066667 11.377778 28.444444 28.444444 28.444445s28.444444-11.377778 28.444445-28.444445v-56.888889c0-17.066667-11.377778-28.444444-28.444445-28.444444zM369.777778 256c-17.066667 0-28.444444 11.377778-28.444445 28.444444v56.888889c0 17.066667 11.377778 28.444444 28.444445 28.444445s28.444444-11.377778 28.444444-28.444445v-56.888889c0-17.066667-11.377778-28.444444-28.444444-28.444444z"
                    fill="#FFFFFF"></path>
                <path
                    d="M725.333333 312.888889H711.111111v28.444444c0 31.288889-25.6 56.888889-56.888889 56.888889s-56.888889-25.6-56.888889-56.888889v-28.444444h-170.666666v28.444444c0 31.288889-25.6 56.888889-56.888889 56.888889s-56.888889-25.6-56.888889-56.888889v-28.444444h-14.222222c-22.755556 0-42.666667 19.911111-42.666667 42.666667v341.333333c0 22.755556 19.911111 42.666667 42.666667 42.666667h426.666666c22.755556 0 42.666667-19.911111 42.666667-42.666667v-341.333333c0-22.755556-19.911111-42.666667-42.666667-42.666667zM426.666667 654.222222h-56.888889c-17.066667 0-28.444444-11.377778-28.444445-28.444444s11.377778-28.444444 28.444445-28.444445h56.888889c17.066667 0 28.444444 11.377778 28.444444 28.444445s-11.377778 28.444444-28.444444 28.444444z m227.555555 0h-56.888889c-17.066667 0-28.444444-11.377778-28.444444-28.444444s11.377778-28.444444 28.444444-28.444445h56.888889c17.066667 0 28.444444 11.377778 28.444445 28.444445s-11.377778 28.444444-28.444445 28.444444z m0-113.777778h-56.888889c-17.066667 0-28.444444-11.377778-28.444444-28.444444s11.377778-28.444444 28.444444-28.444444h56.888889c17.066667 0 28.444444 11.377778 28.444445 28.444444s-11.377778 28.444444-28.444445 28.444444z"
                    fill="#FFFFFF"></path>
              </svg>
              {{item.createTime}}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--  尾部  -->
    <div style="margin-top: 50px;position: relative;z-index: 10">
      <my-footer/>
    </div>

  </div>
</template>

<script>


import MyFooter from "@/components/myFooter.vue";

export default {
  name: "MoreArticle",
  components: {MyFooter},
  data(){
    return{
      articleList:[],
      input:''
    }
  },
  created() {
    this.selectArticleAll()
  },
  methods:{
    //查询所有文章
    selectArticleAll(){
      this.$request.get('/boke/article/show').then(res =>{
        if (res.code === 200){
          this.articleList = res.data || []
        }
      })
    },
    //通过标题来查询
    change(){
      if (this.input!==null){
        this.$request.get('/boke/article/getArticle/like/'+this.input).then(res =>{
          if (res.code === 200){
              this.articleList = res.data || []
            console.log(this.articleList)
          }
        })
      }
    }
  },

}
</script>

<style scoped>
.my-el-image{
  width: 100%;
  height: 100%;

}

.my-el-image .image-slot {
  width: 100%;
  height: 100%;
}
/* 居中 */
.myCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}
.error-text {
  font-size: 20px;
  line-height: 1.8;
  letter-spacing: 8px;
  color: white;
}

.card-image {
  width: 100%;
  height: 180px;
}

.card-image >>> .el-image__inner {
  transition: all 1s;
}

.card-image >>> .el-image__inner:hover {
  transform: scale(1.2);
}

.card-body {
  padding: 10px 20px;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  transition: all .2s ease-in-out;
  cursor: pointer;
}

.card-title:hover {
  color: lightGreen;
}

.card-desc {
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  letter-spacing: 1px;
}

.card-time {
  position: absolute;
  bottom: 10px;
  font-size: 12px;
  color: grey;
}

@media screen and (max-width: 700px) {
  .card-item {
    width: calc(100% / 2 - 20px);
  }
}

@media screen and (max-width: 500px) {
  .card-item {
    width: calc(100% - 20px);
  }
}
</style>